<template>
  <PageContainer title="查看学院">
    <!-- 内容插槽 页面主元素的展示 -->
    <!-- 数据展示 -->
    <el-table :data="dataList" v-loading="loading">
      <el-table-column label="学院号" prop="id" />
      <el-table-column label="学院" prop="college" />
      <el-table-column label="操作">
        <!-- 利用作用域插槽 row 可以获取当前行的数据 -->
        <template #default="{ row }">
          <el-button circle plain type="primary" icon="el-icon-edit" @click="editUser(row)" />
          <el-button circle plain type="danger" icon="el-icon-delete" @click="deleteUser(row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑学院组件 侧边栏 子组件编辑成功会通知父组件 调用successEdit更新页面 -->
    <EditCollege ref="editCollege" @successEdit="getDataList" :identify="viewCollege.identify" />

    <!-- 分页组件 -->
    <!-- current-page当前页数 page-size每页显示条目个数 page-sizes每页显示个数选择器的选项设置 -->
    <el-pagination :current-page="viewCollege.pageNum" :page-size="viewCollege.pageSize" :page-sizes="[3, 5, 7]"
      :background="true" layout="jumper, total, sizes, prev, pager, next" :total="total" @size-change="sizeChange"
      @current-change="currentChange" style="margin-top: 20px; float:right" />
  </PageContainer>
</template>

<script>
import PageContainer from '@/components/PageContainer'
import EditCollege from './EditCollege.vue'
import { getDataList, deleteCollege } from '@/api/college'

export default {
  name: 'viewCollegePage', // 查看学院页面
  components: {
    PageContainer,
    EditCollege
  },
  async created () {
    this.getDataList() // 创建页面后获取学院数据
  },
  data () {
    return {
      loading: false, // 加载效果 取消显示加载效果true
      // 存放搜索数据的条件
      viewCollege: {
        pageNum: 1, // 当前页
        pageSize: 5, // 当前生效的每页条数
        identify: '学院'
      },
      total: 0, // 总条数
      dataList: [] // 存放获取到的学院数据
    }
  },
  methods: {
    // 获取学院数据
    async getDataList () {
      this.loading = true
      // 根据搜索数据的条件获取数据
      const { data: { data } } = await getDataList(this.viewCollege)
      this.dataList = data.records
      this.total = data.total
      this.loading = false
    },
    // 编辑学院信息
    editUser (row) {
      // 调用EditUser组件的openDrawer()方法显示drawer 并把每行的数据row传入进去
      this.$refs.editCollege.openDrawer(row)
    },
    // 删除学院信息
    deleteUser (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteCollege(row.id)
        this.$message.success('删除成功')
        this.getDataList() // 删除成功后重新更新页面
      }).catch(() => { }) // 取消后不行任何逻辑操作 但必须写catch
    },
    // 分页数变化
    sizeChange (size) {
      this.viewCollege.pageNum = 1
      this.viewCollege.pageSize = size
      this.getDataList()
    },
    // 页数变化
    currentChange (page) {
      this.viewCollege.pageNum = page
      this.getDataList()
    }
  }
}
</script>

<style></style>
